<script>
import InputMsg from "../components/InputMsg.vue";

export default {
  name: "UpdataUser",
  data() {
    return {
      showFlag: true,
      userUpdata: {
        id: "",
        updataFormItem: {
          username: "",
          hobby: [],
          age: 0,
        },
      },
      ruleValidate: {
        id: [{ required: true, message: "还没有输入用户ID", trigger: "blur" }],
      },
    };
  },
  methods: {
    // 打开遮罩
    show() {
      this.$Spin.show({
        render: (h) => {
          return h("div", [
            h("Icon", {
              class: "demo-spin-icon-load",
              props: {
                type: "ios-loading",
                size: 18,
              },
            }),
            h("div", "Loading"),
          ]);
        },
      });
    },
    // 修改用户
    updataUser(e) {
      this.show();
      let { username, age, hobby } = e;
      this.$axios
        .put("/users", {
          id: this.userUpdata.id,
          obj: { username, age, hobby },
        })
        .then((data) => {
          this.$Spin.hide();
          if (data.data.code == 0) {
            this.$Message.success("修改成功");
          } else {
            this.$Message.error("修改失败");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    findUser(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.show();
          //   获取该id用户信息,添加到页面上
          this.$axios
            .get("/users", {
              params: { id: this.userUpdata.id },
              headers: { page: 1, perPage: 10 },
            })
            .then((data) => {
              this.$Spin.hide();
              if (data.data.code == 0) {
                let { username, age, hobby } = data.data.data[0];
                Object.assign(this.userUpdata.updataFormItem, { username, age, hobby });
                this.showFlag = false;
              } else {
                this.$Message.error("获取失败,请检查ID是否正确");
              }
            })
            .catch((err) => {
              // 获取失败
              console.log(err);
            });
        } else {
          this.$Message.error("请输入用户ID");
        }
      });
    },
    // v-model
    vModel(key,e){
        this.userUpdata[key]=e
    }
  },
  render() {
      let showTemplete
      if(this.showFlag){
          showTemplete=<FormItem>
            <Button type="primary" onClick={this.findUser.bind(this,'userUpdata')}>
              查询用户
            </Button>
          </FormItem>
      }else{
        showTemplete=<InputMsg
            updataFlag={true}
            onGetMsg={this.updataUser}
            userMsg={this.userUpdata.updataFormItem}
          ></InputMsg>
      }
    return (
      <div class="addUser content">
        <Form ref="userUpdata"  props={{model:this.userUpdata}} rules={this.ruleValidate} label-width={80}>
          <FormItem label="用户ID" prop="id">
            <Input  onInput={this.vModel.bind(this,'id')} placeholder="请输入用户ID"></Input>
          </FormItem>
          {showTemplete}
          
        </Form>
      </div>
    );
  },
};
</script>
